<template>
<div class="shop">
                <div class="shop_img">
                    <img :src="shopInfo.imgUrl" alt="">
                </div>
                <div class="shop_content">
                    <div class="shop_content_title">{{ shopInfo.name }}</div>
                    <div class="shop_content_tags">
                        <span class="shop_content_tag">月售: {{ shopInfo.sales }}</span>
                        <span class="shop_content_tag">起送: {{ shopInfo.expressLimit }}</span>
                        <span class="shop_content_tag">基础运费: {{ shopInfo.expressPrice }}</span>
                    </div>
                    <div class="shop_content_highlight">{{ shopInfo.slogan }}</div>
                </div>
            </div>
</template>
<script setup>
const {shopInfo} = defineProps(['shopInfo'])


</script>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
.shop {
    display: flex;
    margin: .12rem 0;
    min-height: .9rem;
    border-bottom: solid .01rem $content_bgColor;

    &_img {
        display: flex;
        align-items: center;
        margin-right: .16rem;

        img {
            width: .56rem;
            height: .56rem;
        }  
    }

    &_content {
        min-width: 2.67rem;
        font-family: PingFangSC-Regular;
        color: $content_fontcolor;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        &_title {
            line-height: .22rem;
            font-size: .16rem;
            margin-bottom: .08rem;
        }
        &_tags {
            font-size: .13rem;
            margin-bottom: .08rem;
        }
        &_tag {
            line-height: .18rem;
            margin-right: .16rem;
        }
        &_highlight {
            line-height: .18rem;
            margin-right: .16rem;
            color: #E93B3B;
            margin-bottom: .08rem;
        }
    }
}
</style>